<template>
	<view class="my-page">
		<!-- 状态栏 -->
		<view class="status-bar"></view>

		<!-- 顶部个人信息 -->
		<view class="user-info">
			<view class="user-info-left">
				<view class="user-avatar">
					<image src="/static/my/1.png" mode="aspectFill"></image>
				</view>
				<view class="user-details">
					<view class="user-name">张 明 <text class="user-name-en">Ellis Zhang</text></view>
					<view class="user-school">化学大学 金融管理</view>
				</view>
			</view>
			<view class="user-info-right">
				<view class="notification-icon">
					<image src="/static/my/1.png" mode="aspectFit"></image>
				</view>
				<view class="settings-icon">
					<image src="/static/my/2.png" mode="aspectFit"></image>
				</view>
			</view>
		</view>

		<!-- 资产卡片 -->
		<view class="asset-card">
			<view class="asset-button">
				<image src="/static/my/5.png" mode="aspectFit"></image>
				<text>我的资产</text>
			</view>
			<view class="card-container">
				<view class="card-top">
					<view class="card-number">***** **** 4863</view>
				</view>
				<view class="card-middle">
					<view class="card-balance">$34532.2</view>
				</view>
				<view class="card-bottom">
					<view class="card-info">
						<view class="card-name">
							<text class="label">Card Name</text>
							<text class="value">Ellis Zhang</text>
						</view>
						<view class="card-expiry">
							<text class="label">Exp Date</text>
							<text class="value">05/29/2030</text>
						</view>
					</view>
				</view>
			</view>
		</view>

		<!-- 功能管理 -->
		<view class="function-section">
			<view class="section-title">功能管理</view>
			<view class="function-grid">
				<view class="function-item">
					<view class="function-icon blue">
						<image src="/static/my/3.png" mode="aspectFit"></image>
					</view>
					<view class="function-name">我的订单</view>
					<view class="function-desc">订单查询与管理</view>
				</view>
				<view class="function-item">
					<view class="function-icon green">
						<image src="/static/my/4.png" mode="aspectFit"></image>
					</view>
					<view class="function-name">信用体系</view>
					<view class="function-desc">诚信记录/评价</view>
				</view>
			</view>
		</view>

		<!-- 个人信息管理 -->
		<view class="personal-section">
			<view class="section-title">个人信息管理</view>
			<view class="menu-list">
				<view class="menu-item">
					<view class="menu-icon">
						<image src="/static/my/6.png" mode="aspectFit"></image>
					</view>
					<view class="menu-name">证件照生成</view>
					<view class="menu-arrow">
						<image src="/static/my/1.png" mode="aspectFit"></image>
					</view>
				</view>
				<view class="menu-item">
					<view class="menu-icon">
						<image src="/static/my/7.png" mode="aspectFit"></image>
					</view>
					<view class="menu-name">多语言切换</view>
					<view class="menu-arrow">
						<image src="/static/my/1.png" mode="aspectFit"></image>
					</view>
				</view>
				<view class="menu-item">
					<view class="menu-icon">
						<image src="/static/my/8.png" mode="aspectFit"></image>
					</view>
					<view class="menu-name">区块链认证</view>
					<view class="menu-arrow">
						<image src="/static/my/1.png" mode="aspectFit"></image>
					</view>
				</view>
				<view class="menu-item">
					<view class="menu-icon">
						<image src="/static/my/9.png" mode="aspectFit"></image>
					</view>
					<view class="menu-name">支付管理</view>
					<view class="menu-arrow">
						<image src="/static/my/1.png" mode="aspectFit"></image>
					</view>
				</view>
				<view class="menu-item">
					<view class="menu-icon">
						<image src="/static/my/10.png" mode="aspectFit"></image>
					</view>
					<view class="menu-name">我的收藏</view>
					<view class="menu-arrow">
						<image src="/static/my/1.png" mode="aspectFit"></image>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script setup>
// 可以在这里添加页面逻辑

</script>

<style lang="scss">
.my-page {
	background-color: #f5f7fa;
	min-height: 100vh;
	padding-bottom: 30rpx;
}

/* 状态栏 */
.status-bar {
	height: 44px;
	width: 100%;
	background: linear-gradient(to right, #e8f5e9, #f1f8e9);
}

/* 顶部个人信息 */
.user-info {
	background: linear-gradient(to right, #e8f5e9, #f1f8e9);
	padding: 30rpx 30rpx 40rpx;
	display: flex;
	justify-content: space-between;
	align-items: center;

	.user-info-left {
		display: flex;
		align-items: center;

		.user-avatar {
			width: 100rpx;
			height: 100rpx;
			border-radius: 50rpx;
			overflow: hidden;
			margin-right: 24rpx;
			border: 2rpx solid #fff;
			box-shadow: 0 4rpx 8rpx rgba(0, 0, 0, 0.1);

			image {
				width: 100%;
				height: 100%;
			}
		}

		.user-details {
			.user-name {
				font-size: 32rpx;
				font-weight: bold;
				color: #333;
				margin-bottom: 8rpx;

				.user-name-en {
					font-size: 22rpx;
					font-weight: normal;
					color: #666;
					margin-left: 10rpx;
				}
			}

			.user-school {
				font-size: 22rpx;
				color: #666;
			}
		}
	}

	.user-info-right {
		display: flex;
		align-items: center;

		.notification-icon,
		.settings-icon {
			width: 44rpx;
			height: 44rpx;
			margin-left: 24rpx;
			opacity: 0.8;

			image {
				width: 100%;
				height: 100%;
			}
		}
	}
}

/* 资产卡片 */
.asset-card {
	margin: 30rpx;

	.asset-button {
		display: flex;
		align-items: center;
		margin-bottom: 20rpx;
		background-color: #333;
		padding: 10rpx 20rpx;
		border-radius: 30rpx;
		width: fit-content;

		image {
			width: 36rpx;
			height: 36rpx;
			margin-right: 10rpx;
		}

		text {
			font-size: 24rpx;
			font-weight: bold;
			color: #fff;
		}
	}

	.card-container {
		background: linear-gradient(135deg, #f0f9ff, #e1f5fe);
		border-radius: 20rpx;
		padding: 30rpx;
		box-shadow: 0 4rpx 20rpx rgba(0, 0, 0, 0.1);
		border: none;

		.card-top {
			.card-number {
				font-size: 24rpx;
				color: #555;
				margin-bottom: 20rpx;
				letter-spacing: 2rpx;
			}
		}

		.card-middle {
			.card-balance {
				font-size: 64rpx;
				font-weight: bold;
				color: #333;
				margin: 20rpx 0 30rpx 0;
				letter-spacing: 2rpx;
			}
		}

		.card-bottom {
			.card-info {
				display: flex;
				justify-content: space-between;

				.card-name,
				.card-expiry {
					display: flex;
					flex-direction: column;

					.label {
						font-size: 22rpx;
						color: #888;
						margin-bottom: 8rpx;
						letter-spacing: 1rpx;
					}

					.value {
						font-size: 26rpx;
						color: #333;
						font-weight: 500;
					}
				}
			}
		}
	}
}

/* 功能管理 */
.function-section {
	margin: 30rpx;
	background-color: #fff;
	border-radius: 16rpx;
	padding: 30rpx;
	box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.05);

	.section-title {
		font-size: 32rpx;
		font-weight: bold;
		color: #333;
		margin-bottom: 30rpx;
		padding: 0 10rpx;
	}

	.function-grid {
		display: flex;
		justify-content: space-between;

		.function-item {
			width: 48%;
			background-color: #f8f9fc;
			border-radius: 16rpx;
			padding: 24rpx;
			display: grid;
			place-items: center;

			.function-icon {
				width: 90rpx;
				height: 90rpx;
				border-radius: 50%;
				display: flex;
				justify-content: center;
				align-items: center;
				margin-bottom: 16rpx;

				// image {
				// 	width: 100%;
				// 	height: 100%;
				// }

				// &.blue {
				// 	background-color: #e6f7ff;
				// }

				// &.green {
				// 	background-color: #e6fff7;
				// }
			}

			.function-name {
				font-size: 28rpx;
				font-weight: bold;
				color: #333;
				margin-bottom: 8rpx;
				display: flex;
				align-items: center;

				.badge {
					color: #ff4d4f;
					font-size: 40rpx;
					line-height: 20rpx;
					vertical-align: middle;
					margin-left: 5rpx;
				}
			}

			.function-desc {
				font-size: 24rpx;
				color: #999;
			}
		}
	}
}

/* 个人信息管理 */
.personal-section {
	margin: 30rpx;
	background-color: #fff;
	border-radius: 16rpx;
	padding: 30rpx;
	box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.05);

	.section-title {
		font-size: 32rpx;
		font-weight: bold;
		color: #333;
		margin-bottom: 30rpx;
		padding: 0 10rpx;
	}

	.menu-list {
		.menu-item {
			display: flex;
			align-items: center;
			padding: 30rpx 10rpx;
			border-bottom: 1px solid #f5f5f5;

			&:last-child {
				border-bottom: none;
			}

			.menu-icon {
				width: 48rpx;
				height: 48rpx;
				margin-right: 24rpx;
				display: flex;
				align-items: center;
				justify-content: center;

				image {
					width: 100%;
					height: 100%;
				}
			}

			.menu-name {
				flex: 1;
				font-size: 28rpx;
				color: #333;
			}

			.menu-arrow {
				width: 32rpx;
				height: 32rpx;

				image {
					width: 100%;
					height: 100%;
				}
			}
		}
	}
}
</style>
